<template>
  <div>
    <table-layout
      :pagesize="pagesize"
      :page="page"
      :catalog-table-data.sync="directoryList"
      :total="counts"
      @success="getDirectoryList"
      @updateDirectory="updateDirectory"
    />
    <!-- 放置分页组件 -->
    <el-row type="flex" justify="center" align="middle" style="height:60px">
      <el-pagination
        :current-page="page*1"
        :page-size="pagesize*1"
        :total="counts"
        layout="prev,pager,next"
        @current-change="changePage"
      />
    </el-row>
  </div>
</template>

<script>
import { getDirectoryListAPI } from '@/api'
import TableLayout from './tableLayout'
export default {
  name: 'Directory',
  components: {
    TableLayout

  },
  data() {
    return {
      directoryList: [],
      counts: 0, // 总条数
      tableData: [],
      pagesize: 10, // 分页量
      page: 1, // 当前页
			pages: 0

    }
  },
  created() {
    this.getDirectoryList()
  },
  methods: {
    // 获取目录列表
    async getDirectoryList() {
      const { items, pagesize, pages, page, counts } = await getDirectoryListAPI(
        this.page, this.pagesize
      )
      this.directoryList = items
      this.counts = counts
			this.page = page
			this.pagesize = pagesize
			this.pages = pages
    },
		/**
		 * 点击分页按钮，切换分页
		 * **/
		changePage(newpage) {
			this.page = newpage
			this.getDirectoryList()
		},
    /**
     * 当前页码发生改变时触发
     * handleCurrentChange
     */
    handleCurrentChange(page) {
      console.log(page);
      this.page = page
      this.getDirectoryList()
    },
		/**
		 * 点击搜索后，筛选出符合条件的数据，更新列表
		 * **/
		updateDirectory(items) {
			this.directoryList = items

		}
  }
}
</script>

<style lang='scss' scoped>
::v-deep.page {
  display: flex;
  justify-content: flex-end;
  margin: 10px 20px;
}
</style>